<template>
  <div class="salarys-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        薪资管理
        <son :id="id" ref="son" />
        <el-button @click="hClick">点我改 id</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
import Son from './son.vue'
export default {
  components: {
    Son
  },
  data() {
    return {
      id: 'woxiangquxijiao'
    }
  },
  methods: {
    hClick() {
      // 在父组件中修改 id
      this.id = '我想去洗脚!'
      // 修改后立即获取子组件的 id, 发现并没有更新, 因为 props 数据更新是异步的
      // console.log(this.$refs.son.id) // woxiangquxijiao
      this.$nextTick(() => {
        console.log(this.$refs.son.id) // 我想去洗脚!
      })
    }
  }
}
</script>
